@import "~../global.less";
@import "~../font.less";
@import "~../icon.less";
@import "~../color.less";
@import "~../animate.less";

body {
    width: 1920px;
    height: 1080px;
    background: url(../../images/bg.jpg) no-repeat left top;
    background-size: cover;
}

.envpicker {
    width: 363px;
    height: 663px;
    background: url(../../images/c-envpicker/bg-envpicker.png) no-repeat top left;
    background-size: contain;
    // padding: 42px 3px 3px 3px;
    padding: 21px 2px 2px 2px;
    margin-left: 62px;

    .envpicker-wrapper {
        backdrop-filter: blur(5px);
        width: 100%;
        // height: calc(1326px - 39px);
        height: calc(663px - 19px);
    }

    .envpicker-header {
        // padding: 24px 46px 25px 56px;
        padding: 12px 23px 12px 28px;
        display: flex;
        flex-flow: nowrap row;
        align-items: center;

        .title {
            display: flex;
            align-items: center;
            line-height: 30px;
            font-size: 21px;
            flex-grow: 1;
            flex-shrink: 1;
            color: #FFF;
            font-family: 'ys';

            .icon {
                display: inline-block;
                width: 30px;
                height: 30px;
                margin-right: 5px;

                &.icon-time {
                    .bg-icon-time();
                }

                &.icon-season {
                    .bg-icon-season();
                }

                &.icon-calendar {
                    .bg-icon-calendar();
                }

                &.icon-weather {
                    .bg-icon-weather();
                }
            }
        }

        .extra {
            flex-grow: 0;
            flex-shrink: 0;
            // width: 155px;
            width: 77px;
            display: flex;
            align-items: center;

            .text {
                font-family: 'ali-m';
                font-size: 14px;
                color: #FFF;
                margin-right: 6px;
            }

            .ivu-switch {
                width: 43px;
                height: 17px;
                border: 1px #A9A9A9 solid;
                background: #A9A9A9;
                box-shadow: 0 1px 2px rgb(255 255 255 / 50%) inset;

                &::after {
                    width: 15px;
                    height: 15px;
                    transition: .5s;
                }
            }

            .ivu-switch-checked {
                background: #28B15F;
                border: #28B15F 1px solid;

                &:after {
                    left: 26px;
                }
            }
        }
    }

    .envpicker-body {
        padding: 0 28px 0px 28px;
        font-size: 16px;
        font-family: 'ali-m';

        .ivu-slider {
            line-height: normal;
            height: 49px;
        }

        .ivu-slider-wrap {
            height: 9px;
            // border-radius: 9px;
            border-radius: 5px;

            .ivu-slider-bar {
                background: -webkit-linear-gradient(right, #83BF39, #1DC760);
                height: 9px;
                border-radius: 5px;
                // border-radius: 9px;
            }

            .ivu-slider-stop {
                display: none;
            }

            .ivu-slider-marks {
                .ivu-slider-marks-item {
                    height: 22px;
                    font-size: 14px;
                    font-family: 'ali-m';
                    color: #fff;
                    margin-top: 15px;
                    // width: 61px;
                    width: 30px;
                    text-align: center;
                }
            }

            .ivu-slider-button-wrap {
                width: 18px;
                height: 18px;
                top: -6px;

                .ivu-slider-button {
                    width: 18px;
                    height: 18px;
                    border: 0;
                    // box-shadow: 0 2px 5px #00000088;
                    box-shadow: 0 1px 2px #00000088;
                }
            }
        }

        .ivu-radio-group {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-evenly;
            padding-bottom: 9px;

            .ivu-radio-group-item {
                width: 25%;
                padding: 9px 0;
                flex-shrink: 1;
                flex-grow: 1;
                margin: 0;
                text-align: center;

                .ivu-radio {
                    display: none;
                }

                .icon {
                    width: 27px;
                    height: 27px;
                    margin: 0 auto;
                    transition: .3s;
                    margin-bottom: 6px;

                    &.icon-weather-sunny {
                        .bg-icon-weather-sunny-normal();
                    }

                    &.icon-weather-darken {
                        .bg-icon-weather-darken-normal();
                    }

                    &.icon-weather-cloudy {
                        .bg-icon-weather-cloudy-normal();
                    }

                    &.icon-weather-fog {
                        .bg-icon-weather-fog-normal();
                    }

                    &.icon-weather-little-rainy {
                        .bg-icon-weather-little-rainy-normal();
                    }

                    &.icon-weather-medium-rainy {
                        .bg-icon-weather-medium-rainy-normal();
                    }

                    &.icon-weather-heavy-rainy {
                        .bg-icon-weather-heavy-rainy-normal();
                    }

                    &.icon-weather-haze {
                        .bg-icon-weather-haze-normal();
                    }

                    &.icon-weather-little-snowy {
                        .bg-icon-weather-little-snowy-normal();
                    }

                    &.icon-weather-medium-snowy {
                        .bg-icon-weather-medium-snowy-normal();
                    }

                    &.icon-weather-heavy-snowy {
                        .bg-icon-weather-heavy-snowy-normal();
                    }

                    &.icon-weather-blizzard {
                        .bg-icon-weather-blizzard-normal();
                    }
                }

                .text {
                    color: #fff;
                    font-family: 'ali-m';
                    font-size: 16px;
                }
            }

            .ivu-radio-wrapper-checked {
                .icon {
                    &.icon-weather-sunny {
                        .bg-icon-weather-sunny-actived();
                    }

                    &.icon-weather-darken {
                        .bg-icon-weather-darken-actived();
                    }

                    &.icon-weather-cloudy {
                        .bg-icon-weather-cloudy-actived();
                    }

                    &.icon-weather-fog {
                        .bg-icon-weather-fog-actived();
                    }

                    &.icon-weather-little-rainy {
                        .bg-icon-weather-little-rainy-actived();
                    }

                    &.icon-weather-medium-rainy {
                        .bg-icon-weather-medium-rainy-actived();
                    }

                    &.icon-weather-heavy-rainy {
                        .bg-icon-weather-heavy-rainy-actived();
                    }

                    &.icon-weather-haze {
                        .bg-icon-weather-haze-actived();
                    }

                    &.icon-weather-little-snowy {
                        .bg-icon-weather-little-snowy-actived();
                    }

                    &.icon-weather-medium-snowy {
                        .bg-icon-weather-medium-snowy-actived();
                    }

                    &.icon-weather-heavy-snowy {
                        .bg-icon-weather-heavy-snowy-actived();
                    }

                    &.icon-weather-blizzard {
                        .bg-icon-weather-blizzard-actived();
                    }
                }
            }
        }

        &:after {
            content: '';
            width: 100%;
            display: block;
            height: 1px;
            background: -webkit-linear-gradient(left, #FFFFFF00, #FFFFFFFF, #FFFFFF00);

        }
    }
}

.sphere {
    position: fixed;
    z-index: 10;
    width: calc(229px + 318px);
    height: calc(340px + 120px);
    bottom: 0px;
    left: 0px;

    .sphere-pattern-wrapper {



        .sphere-layer {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 40px;
            left: 0;

            &.layer-1 {
                background: url(../../images/c-sphere/sphere-layer-1.png) no-repeat center center;
                background-size: contain;
                animation: 25s rollingClockwise infinite;

            }

            &.layer-2 {
                background: url(../../images/c-sphere/sphere-layer-2.png) no-repeat center center;
                background-size: contain;
                animation: 50s rollingClockwise reverse infinite;
            }

            &.layer-3 {
                background: url(../../images/c-sphere/sphere-layer-3.png) no-repeat center center;
                background-size: contain;
                animation: 15s rollingClockwise infinite;
            }

            &.layer-4 {
                background: url(../../images/c-sphere/sphere-layer-4.png) no-repeat center center;
                background-size: contain;
                // animation: 60s rollingClockwise infinite;
            }

            &.layer-5 {
                background: url(../../images/c-sphere/sphere-layer-5.png) no-repeat center center;
                background-size: contain;
                // animation: 60s rollingClockwise infinite;
                display: none;
            }
        }
    }

    .menu {
        position: absolute;
        z-index: 11;
        left: 250px;
        bottom: 60px;
        // height: calc(429px + 62px);
        width: calc(70px + 234px);

        span.ivu-radio {
            display: none;
        }

        .ivu-radio-group {
            position: relative;

            &>.ivu-radio-group-item {
                display: block;
                display: flex;
                flex-flow: row nowrap;
                position: relative;
                width: 79px;
                height: 79px;

                .icon-wrapper {
                    width: 79px;
                    height: 79px;
                    padding: 6px;
                    transition: .3s;

                    .icon {
                        width: 62px;
                        height: 62px;
                        display: block;
                        transition: .3s;

                        &.icon-menu-overall {
                            .bg-icon-menu-overall-normal();
                        }

                        &.icon-menu-ecology {
                            .bg-icon-menu-ecology-normal();
                        }

                        &.icon-menu-construction {
                            .bg-icon-menu-construction-normal();
                        }

                        &.icon-menu-landscape {
                            .bg-icon-menu-landscape-normal();
                        }

                        &.icon-menu-management {
                            .bg-icon-menu-management-normal();
                        }
                    }
                }

                .menu-content {
                    width: 0;
                    overflow: hidden;
                    transition: 0.3s;
                    // margin-left: -15px;
                    margin-left: -12px;
                    padding-left: 16px;
                    padding-top: 16px;
                    margin-top: 2px;

                    .title {
                        font-family: 'ys';
                        font-weight: 300;
                        font-size: 28px;
                        line-height: 28px;
                        color: #FFF;
                    }

                    .subtitle {
                        font-family: 'ali';
                        font-size: 14px;
                        line-height: 14px;
                        color: #FFF;
                    }
                }

                &.ivu-radio-wrapper-checked {
                    // width: 515px;
                    width: 257px;
                    height: 79px;

                    .icon-wrapper {
                        background: rgba(0, 0, 0, 0.1);
                        width: 80px;
                        height: 80px;
                        border-radius: 79px;
                        backdrop-filter: blur(50px);
                        border: 1px #fff solid;
                        padding: 8px;

                        .icon {

                            &.icon-menu-overall {
                                .bg-icon-menu-overall-actived();
                            }

                            &.icon-menu-ecology {
                                .bg-icon-menu-ecology-actived();
                            }

                            &.icon-menu-construction {
                                .bg-icon-menu-construction-actived();
                            }

                            &.icon-menu-landscape {
                                .bg-icon-menu-landscape-actived();
                            }

                            &.icon-menu-management {
                                .bg-icon-menu-management-actived();
                            }
                        }
                    }

                    .menu-content {
                        background: url(../../images/c-sphere/menu-actived-text-bg.png) no-repeat center left;
                        background-size: contain;
                        width: 166px;
                        height: 77px;
                    }
                }

                &:nth-child(1) {
                    // left: calc(0px - 62px);
                    // top: -25px;
                    // top: -12px;
                    bottom: 26px
                
                }

                &:nth-child(2) {
                    // left: calc(15px - 31px);
                    left: 55px;bottom: 26px
                }

                &:nth-child(3) {
                    // top: 25px;
                    // top: 12px;
                    // left: 15px;
                    left: 75px;
                    bottom: 12px

                }

                &:nth-child(4) {
                    // left: calc(15px - 31px);
                    // top: 25px;
                    left: 55px;
                }

                &:nth-child(5) {
                    // left: calc(0px - 62px);
                    // top: 75px;
                    // top: 37px;
                }
            }
        }

    }

}

.top {
    width: 264px;
    height: auto;
    position: fixed;
    // top: 35px;
    top: 17px;
    // left: 55px;
    left: 17px;
    z-index: 30;

    .logo {
        width: 264px;
        // height: 181px;
        height: 90px;
        background: url(../../images/c-top/logo.png) no-repeat top left;
        background-size: cover;
    }

    &>.extra {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        width: 100%;
        height: 30px;

        .item {
            padding: 0 6px;
            // border-right: 5px rgba(255, 255, 255, 0.7) solid;
            border-right: 2px rgba(255, 255, 255, 0.7) solid;
            height: 18px;
            flex-grow: 1;
            flex-shrink: 1;
            text-align: center;

            .text {
                font-family: 'borda';
                font-size: 18px;
                color: #FFF;
                line-height: 18px;
            }

            .icon {
                display: inline-block;
                width: 16px;
                height: 16px;
                margin: 0 3px 0 0;
                background-size: contain;
                transition: .4s;

                &.icon-weather-sunny {
                    .bg-icon-weather-sunny-actived();
                }

                &.icon-weather-darken {
                    .bg-icon-weather-darken-actived();
                }

                &.icon-weather-cloudy {
                    .bg-icon-weather-cloudy-actived();
                }

                &.icon-weather-fog {
                    .bg-icon-weather-fog-actived();
                }

                &.icon-weather-little-rainy {
                    .bg-icon-weather-little-rainy-actived();
                }

                &.icon-weather-medium-rainy {
                    .bg-icon-weather-medium-rainy-actived();
                }

                &.icon-weather-heavy-rainy {
                    .bg-icon-weather-heavy-rainy-actived();
                }

                &.icon-weather-haze {
                    .bg-icon-weather-haze-actived();
                }

                &.icon-weather-little-snowy {
                    .bg-icon-weather-little-snowy-actived();
                }

                &.icon-weather-medium-snowy {
                    .bg-icon-weather-medium-snowy-actived();
                }

                &.icon-weather-heavy-snowy {
                    .bg-icon-weather-heavy-snowy-actived();
                }

                &.icon-weather-blizzard {
                    .bg-icon-weather-blizzard-actived();
                }

                &.icon-arrow-up {
                    .bg-icon-arrow-up();
                    cursor: pointer;
                }

                &.icon-arrow-down {
                    cursor: pointer;
                    .bg-icon-arrow-down();
                }
            }
        }
    }
}

.toolbar {
    position: fixed;
    bottom: 50px;
    left: 500px;
    z-index: 10;
    display: flex;
    flex-flow: nowrap row;
    justify-content: space-evenly;
    align-items: center;

    .ivu-tooltip-popper {
        .ivu-tooltip-content {
            position: relative;
            bottom: 10px;
        }

        .ivu-tooltip-inner {
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(30px);
            color: #929292;
            font-family: 'ys';
            font-size: 19px;
            padding: 0;
            width: 60px;
            line-height: 25px;
            height: 25px;
            text-align: center;
            box-shadow: none;
        }

        .ivu-tooltip-arrow {
            bottom: -9px;
            border-width: 15px 10px 0;
            border-top-color: rgba(255, 255, 255, 0.9);
            margin-left: -10px;
        }
    }

    .item {
        padding: 0 16px;

        .btn {
            width: 50px;
            height: 50px;
            transition: .3s;
            cursor: pointer;

            .icon {
                width: 100%;
                height: 100%;

                &.icon-open-sphere {
                    .bg-icon-open-sphere-normal();
                }

                &.icon-close-sphere {
                    .bg-icon-close-sphere-normal();
                }

                &.icon-setting {
                    .bg-icon-setting-normal();
                }

                &.icon-home {
                    .bg-icon-home-normal();
                }
            }
        }

        &:active {
            .icon {
                &.icon-open-sphere {
                    .bg-icon-open-sphere-actived();
                }

                &.icon-close-sphere {
                    .bg-icon-close-sphere-actived();
                }

                &.icon-setting {
                    .bg-icon-setting-actived();
                }

                &.icon-home {
                    .bg-icon-home-actived();
                }
            }
        }
    }
}


.right {
    position: fixed;
    z-index: 20;
    width: 504px;
    right: 42px;
    bottom: 0;
    top: 0;
    perspective-origin: right center;
    perspective: 500px;
    padding: 24px 0;
    transform-origin: top right;
}

.row {
    width: 504px;
    transform: rotateY(-4deg);
    margin-bottom: 0px;

    &.clean-row {
        transform: none;
        margin: 0;
    }

    &::before {
        display: block;
        width: 504px;
        height: 6px;
        position: relative;
        top: 0px;
        background: url(../../images/c-row/bg-row-before.png) no-repeat top center;
        background-size: contain;
        content: '';
    }

    &::after {
        display: block;
        width: 504px;
        height: 6px;
        position: relative;
        background: url(../../images/c-row/bg-row-after.png) no-repeat top center;
        content: '';
    }

}

.box {
    width: 480px;
    display: flex;
    flex-flow: column;
    border-radius: 5px;
    background: -webkit-linear-gradient(top, #00000010, #00000020);
    backdrop-filter: blur(15px);
    margin-left: 12px;

    // transform:rotateX(80deg);

    .box-header {
        display: flex;
        flex-flow: nowrap row;
        align-items: center;
        flex-grow: 0;
        flex-shrink: 0;
        background: url(../../images/c-box/bg-box-header.png) no-repeat top left;
        width: 100%;
        height: 30px;
        padding-left: 23px;

        .icon {
            width: 24px;
            height: 24px;
            margin-right: 8px;
            flex-grow: 0;
            flex-shrink: 0;

            &.icon-ecological-record {
                .bg-icon-ecological-record-header();
            }
        }

        .title {
            font-size: 24px;
            color: #fff;
            letter-spacing: 2.9px;
            font-family: 'ys';
            flex-shrink: 1;
            flex-grow: 1;
        }

        .box-extra {
            min-width: 160px;
            height: 36px;
            flex-grow: 0;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            margin-top: 0px;
        }

        &.box-header-panel {
            background: url(../../images/c-box/bg-box-header-gray.png) no-repeat top left;
        }
    }

    .box-body {
        align-items: stretch;
        flex-grow: 1;
        flex-shrink: 1;
        padding: 10px 10px 10px 20px;

        &.train {
            display: flex;
            flex-flow: row wrap;
            align-items: stretch;

            .item {
                flex-grow: 1;
                flex-shrink: 1;
                display: flex;
                flex-flow: column nowrap;
                justify-content: space-around;

                &.train {
                    flex-flow: row wrap;
                    justify-content: center;
                    align-items: center;
                }
            }
        }


        &.tower {
            display: block;
            justify-items: stretch;
         
        }

        .ivu-table {
            background-color: transparent;

            .ivu-table-header {
                color: #FFF;
                font-size: 12px;
                font-family: 'ali-m';

                th {
                    background: #22A857;
                    padding: 1px 0;
                    text-align: center;
                    border: none;
                }
            }

            .ivu-table-body {
                background-color: transparent;
                height: 74px;

                &::-webkit-scrollbar {
                    margin-right: 3px;
                    width: 3px;
                }

                &::-webkit-scrollbar-track {
                    // width: 3px;
                    width: 1px;
                    background: #00000046;
                }

                &::-webkit-scrollbar-thumb {
                    width: 2px;
                    background: #FFFFFFDD;
                    border-radius: 2px;
                }

                td {
                    background: #00000060;
                    font-size: 12px;
                    font-family: 'ali-m';
                    text-align: center;
                    color: #fff;
                    border: none;
                    height: 36px;
                }

                .bullet-red {
                    .ivu-table-cell {

                        &::before {
                            width: 10px;
                            height: 10px;
                            display: block;
                            margin-right: 10px;
                            content: '';
                            display: inline-block;
                            .bg-icon-bullet-red();
                        }

                    }
                }

                .bullet-green {
                    .ivu-table-cell {

                        &::before {
                            width: 10px;
                            height: 10px;
                            display: block;
                            display: inline-block;
                            margin-right: 5px;
                            content: '';
                            .bg-icon-bullet-green();
                        }

                    }
                }
            }
        }
    }
}

.selection {
    position: fixed;
    top: 25px;
    left: 350px;
    z-index: 20;

    .ivu-checkbox-group-item {
        margin-right: 30px;
        cursor: pointer;

        .ivu-checkbox {
            display: none;
        }

        .icon {
            width: 62px;
            height: 62px;
            margin: 0 auto;
            transition: .3s;

            &.icon-mountain {
                .bg-icon-mountain-normal();
            }

            &.icon-water {
                .bg-icon-water-normal();
            }

            &.icon-forest {
                .bg-icon-forest-normal();
            }

            &.icon-field {
                .bg-icon-field-normal();
            }

            &.icon-grass {
                .bg-icon-grass-normal();
            }

            &.icon-lake {
                .bg-icon-lake-normal();
            }

            &.icon-architecture {
                .bg-icon-architecture-normal();
            }

            &.icon-facility {
                .bg-icon-facility-normal();
            }
        }

        .text {
            margin-top: 9px;
            transition: .3s;

            .title {
                font-size: 20px;
                font-family: 'ys';
                color: #FFF;
                display: block;
                text-align: center;
            }

            .subtitle {
                font-size: 12px;
                font-family: 'ali-m';
                color: #FFF;
                display: block;
                text-align: center;
            }
        }
    }

    .ivu-checkbox-wrapper-checked {
        .icon {
            &.icon-mountain {
                .bg-icon-mountain-actived();
            }

            &.icon-water {
                .bg-icon-water-actived();
            }

            &.icon-forest {
                .bg-icon-forest-actived();
            }

            &.icon-field {
                .bg-icon-field-actived();
            }

            &.icon-grass {
                .bg-icon-grass-actived();
            }

            &.icon-lake {
                .bg-icon-lake-actived();
            }

            &.icon-architecture {
                .bg-icon-architecture-actived();
            }

            &.icon-facility {
                .bg-icon-facility-actived();
            }
        }

        .text {
            text-shadow: 0 2px 4px #22A857;
        }
    }
}

.toggle-list {
    position: fixed;
    top: 25px;
    left: 335px;
    z-index: 20;

    .ivu-badge {
        .ivu-badge-count {
            right: 16px;
            width: 18px;
            height: 18px;
            font-size: 12px;
            line-height: 18px;
            font-family: 'borda';
            border-radius: 18px;
        }
    }

    .ivu-checkbox-group-item {
        margin: 0 15px;
        cursor: pointer;

        .ivu-checkbox {
            display: none;
        }

        .icon {
            width: 62px;
            height: 62px;
            margin: 0 auto 9px auto;
            transition: .3s;

            &.icon-ecology-monitor {
                .bg-icon-ecology-monitor-normal();
            }

            &.icon-ecology-maintain {
                .bg-icon-ecology-maintain-normal();
            }

            &.icon-ecological-record {
                .bg-icon-ecological-record-normal();
            }

            &.icon-ecology-scheme {
                .bg-icon-ecology-scheme-normal();
            }

            &.icon-ecology-simulation {
                .bg-icon-ecology-simulation-normal();
            }

            &.icon-camera {
                .bg-icon-camera-normal();
            }

            &.icon-personnel {
                .bg-icon-personnel-normal();
            }

            &.icon-tower-crane {
                .bg-icon-tower-crane-normal();
            }

            &.icon-bus {
                .bg-icon-bus-normal();
            }

            &.icon-broadcaster {
                .bg-icon-broadcaster-normal();
            }

            &.icon-restroom {
                .bg-icon-restroom-normal();
            }

            &.icon-service-facilities {
                .bg-icon-service-facilities-normal();
            }

            &.icon-management-facility {
                .bg-icon-management-facility-normal();
            }

            &.icon-vehicle {
                .bg-icon-vehicle-normal();
            }
        }
    }

    .ivu-checkbox-wrapper-checked {
        .icon {
            &.icon-ecology-monitor {
                .bg-icon-ecology-monitor-actived();
            }

            &.icon-ecology-maintain {
                .bg-icon-ecology-maintain-actived();
            }

            &.icon-ecological-record {
                .bg-icon-ecological-record-actived();
            }

            &.icon-ecology-scheme {
                .bg-icon-ecology-scheme-actived();
            }

            &.icon-ecology-simulation {
                .bg-icon-ecology-simulation-actived();
            }

            &.icon-camera {
                .bg-icon-camera-actived();
            }

            &.icon-personnel {
                .bg-icon-personnel-actived();
            }

            &.icon-tower-crane {
                .bg-icon-tower-crane-actived();
            }

            &.icon-bus {
                .bg-icon-bus-actived();
            }

            &.icon-broadcaster {
                .bg-icon-broadcaster-actived();
            }

            &.icon-restroom {
                .bg-icon-restroom-actived();
            }

            &.icon-service-facilities {
                .bg-icon-service-facilities-actived();
            }

            &.icon-management-facility {
                .bg-icon-management-facility-actived();
            }

            &.icon-vehicle {
                .bg-icon-vehicle-actived();
            }
        }
    }

    .ivu-tooltip-popper {
        .ivu-tooltip-content {}

        .ivu-tooltip-inner {
            color: #929292;

            .title {
                font-family: 'ys';
                font-size: 20px;
                line-height: 20px;
                text-align: center;
            }

            .subtitle {
                font-size: 12px;
                font-family: 'ali-m';
                text-align: center;
            }
        }

        .ivu-tooltip-arrow {}
    }
}

.glass {
    width: 504px;
    transform: rotateY(-4deg);
    margin-bottom: 10px;

    &.ripple {
        background: url(../../images/c-glass/ripple.png) no-repeat center center;
        background-size: contain;
        width: 200px;
        height: 200px;
        margin: 0 auto;
        padding: 16px 0;
    }

    .slot:first-of-type {

        height: 145px;

        &>div>div {
            width: 200px !important;

            canvas {
                width: 200px !important;
                height: 145px !important;
            }
        }
    }
}

.plate {
    .plate-header {
        border-left: #22a857 4px solid;
        background: #22a85725;
        display: flex;
        align-items: center;

        .title {
            padding-left: 13px;
            font-family: 'ys';
            font-size: 20px;
            color: #fff;
        }
    }

    .plate-body {
        display: flex;
        flex-flow: column;
        padding: 6px 0;

        &.train {
            flex-flow: row wrap;
        }

        .plate-item {
            &.train {
                display: flex;
                flex-flow: row wrap;
                justify-content: center;
                align-items: center;
            }
        }
    }
}

.legend {
    width: 163px;
    height: auto;
    position: fixed;
    z-index: 20;

    &.ecology-legend {
        left: 350px;
        top: 115px;
    }

    &.landscape-legend {
        top: 107px;
        left: 772px;
    }

    .legend-header {
        width: 100%;
        height: 28px;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        padding-left: 12px;

        .icon {
            width: 20px;
            height: 20px;
            transition: .3s;

            &.icon-legend-header {
                .bg-icon-legend-head();
            }
        }

        .text {
            margin-left: 6px;
            font-family: 'ali-m';
            font-size: 14px;
            color: #fff;
        }
    }

    .legend-body {
        background: url(../../images/c-legend/bg-legend-panel.png) no-repeat center center;
        background-size: cover;
        backdrop-filter: blur(10px);
        padding-bottom: 9px;

        .legend-item {
            padding: 9px 0 0 12px;

            input[type="checkbox"] {
                display: none;
            }

            label {
                display: flex;
                align-items: center;
            }

            .icon {
                width: 20px;
                height: 20px;
                transition: .3s;
                cursor: pointer;

                &.icon-show {
                    .bg-icon-show();
                }

                &.icon-hide {
                    .bg-icon-hide();
                }
            }

            .legend-color-plate {
                width: 12px;
                height: 12px;
                border: 1px #fff solid;
                margin: 0 10px;
            }

            .text {
                font-size: 18px;
                font-family: 'ali-m';
                color: #fff;
            }
        }
    }
}

.list {
    display: flex;
    flex-flow: column;
    justify-content: center;

    .list-item {
        &.train {
            padding: 3px 0;
            display: flex;
            flex-flow: row nowrap;
            // border-bottom: 5px #ffffff50 solid;
            border-bottom: 2px #ffffff50 solid;

            .chart-wrapper {
                flex-grow: 0;
                flex-shrink: 0;
                width: 100px;
                height: 100px !important;

                &>.slot {
                    width: 100px;

                    .title {
                        font-size: 32px;
                        line-height: 32px;

                        small {}
                    }

                    .subtitle {
                        font-size: 18px;
                        line-height: 18px;
                    }

                    &:last-of-type {

                        div,
                        canvas {
                            width: 100px;
                            height: 100px !important;
                        }
                    }
                }
            }

            .stick-group {
                flex-grow: 1;
                flex-shrink: 1;
            }
        }
    }
}

.index-card-wrapper {

    .index-card {
        // width: 125px;
        width: 62px;
        margin: 0 auto;

        .number {
            text-align: center;
            font-family: 'borda';
            font-size: 29px;
            letter-spacing: 1.54px;
            color: #fff;

            small {
                font-family: 'ali-m';
                font-size: 14px;
                margin-left: 2px;
                color: #fff;
            }
        }

        .text {
            border-radius: 2px;
            font-family: 'ali-m';
            font-size: 14px;
            color: #fff;
            text-align: center;
            padding: 2px 0;
        }
    }
}

.icon-card-wrapper {
    .icon-card {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        padding: 0px 0;

        .icon-card-header {
            flex-shrink: 0;
            flex-grow: 0;
            padding-right: 8px;

            .icon {
                width: 36px;
                height: 36px;

                &.icon-project-amount {
                    .bg-icon-project-amount();
                }

                &.icon-accomplish-percent {
                    .bg-icon-accomplish-percent();
                }

                &.icon-patrol-count {
                    .bg-icon-patrol-count();
                }

                &.icon-pass-count {
                    .bg-icon-pass-count();
                }

                &.icon-hidden-dangerous {
                    .bg-icon-hidden-dangerous();
                }

                &.icon-worker-amount {
                    .bg-icon-worker-amount();
                }

                &.icon-worker-registered {
                    .bg-icon-worker-registered();
                }

                &.icon-worker-field {
                    .bg-icon-worker-field();
                }

                &.icon-tourist-on-island {
                    .bg-icon-tourist-on-island();
                }

                &.icon-subscribe-today {
                    .bg-icon-subscribe-today();
                }

                &.icon-bus-running {
                    .bg-icon-bus-running();
                }

                &.icon-warning-count {
                    .bg-icon-warning-count();
                }

                &.icon-humidity {
                    .bg-icon-humidity();
                }

                &.icon-noise {
                    .bg-icon-noise();
                }

                &.icon-pm10 {
                    .bg-icon-pm10();
                }

                &.icon-pm25 {
                    .bg-icon-pm25();
                }

                &.icon-temperature {
                    .bg-icon-temperature();
                }

                &.icon-wind-speed {
                    .bg-icon-wind-speed();
                }

                &.icon-construction-warning-count {
                    .bg-icon-construction-warning-count();
                }

                &.icon-construction-warning-type {
                    .bg-icon-construction-warning-type();
                }

                &.icon-tourist-entering {
                    .bg-icon-tourist-entering();
                }

                &.icon-tourist-leaving {
                    .bg-icon-tourist-leaving();
                }

                &.icon-subscribe-tomorrow {
                    .bg-icon-subscribe-tomorrow();
                }

                &.icon-subscribe-3days {
                    .bg-icon-subscribe-3days();
                }

                &.icon-bus-operating-today {
                    .bg-icon-bus-operating-today();
                }

                &.icon-average-operating-duration {
                    .bg-icon-average-operating-duration();
                }

                &.icon-gear {
                    .bg-icon-gear();
                }

                &.icon-truck {
                    .bg-icon-truck();
                }

                &.icon-worker {
                    .bg-icon-worker();
                }
            }
        }

        .icon-card-body {
            flex-grow: 1;
            flex-shrink: 1;

            .number {
                font-family: 'borda-bold';
                font-size: 24px;
                color: #fff;
                letter-spacing: 1.54px;

                small {
                    font-family: 'ali-m';
                    font-size: 18px;
                    color: #fff;
                }
            }

            .title {
                font-family: 'ali-b';
                color: #fff;
                font-size: 16px;
                line-height: 16px;
            }
        }
    }
}

.float-panel {
    position: fixed;
    z-index: 20;

    &.ecological-record {
        top: 115px;
        left: 525px;
        width: 516px;
    }

    .ivu-form-item-content {
        margin-bottom: 12px;

        .label {
            font-size: 16px;
            font-family: 'ali-m';
            color: #fff;
            line-height: 32px;
        }

        .text {
            font-size: 16px;
            font-family: 'ali-m';
            color: #fff;
            line-height: 32px;
            display: block;
            text-align: center;
        }

        .ivu-select-selection {
            height: 32px;
            background: #00000033;

            .ivu-select-arrow {
                color: #fff;
                font-size: 16px;
            }

            .ivu-select-selected-value {
                font-family: 'ali-m';
                font-size: 16px;
                height: 32px;
                line-height: 32px;
                color: #fff;
            }
        }

        .ivu-select-dropdown {
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 0;
            max-height: 228px;
            // padding: 5px;
            padding: 2px;

            .ivu-select-item {
                font-size: 16px !important;
                font-family: 'ali-m';
                padding: 3px 20px;
                color: #fff;
                transition: .3s;
                border: 1px transparent solid;

                &.ivu-select-item-focus {
                    background-color: transparent;
                }

                &:hover {
                    background: -webkit-linear-gradient(top, #ffffff66, #ffffff00);
                    border: 1px #ffffff99 solid;
                }

                &:active {
                    background: -webkit-linear-gradient(top, #7db163aa, #7db16350);
                    border: 1px #7db163 solid
                }
            }
        }

        .ivu-input {
            height: 32px;
            background-color: #00000033;
            line-height: 32px;
            border: none;
            font-family: 'ali-m';
            color: #fff;
            font-size: 16px;
        }

        .form-row-btn {
            width: 20px;
            height: 20px;
            margin-top: 6px;
            cursor: pointer;

            .icon {
                width: 20px;
                height: 20px;
                transition: .3s;

                &.icon-add-row {
                    .bg-icon-add-row-normal();

                    &:active {
                        .bg-icon-add-row-actived();
                    }
                }

                &.icon-remove-row {
                    .bg-icon-remove-row-normal();

                    &:active {
                        .bg-icon-remove-row-actived();
                    }
                }
            }
        }
    }

    .form-submit {
        width: 236px;
        height: 28px;
        background: url(../../images/c-form/form-btn-submit-normal.png) no-repeat center center;
        font-size: 16px;
        font-family: 'ali-m';
        color: #fff;
        margin: 0px auto;
        display: block;
        cursor: pointer;
        transition: .3s;

        &:active {
            background: url(../../images/c-form/form-btn-submit-actived.png) no-repeat center center;
        }
    }

    .form-reset {
        position: absolute;
        font-size: 16px;
        font-family: 'ali-m';
        color: #fff;
        right: 12px;
        bottom: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        height: 28px;

        .icon {
            width: 20px;
            height: 20px;
            margin-right: 8px;
            transition: .3s;

            &.icon-reset {
                .bg-icon-reset-normal();
            }
        }

        &:active {
            .icon {
                &.icon-reset {
                    .bg-icon-reset-actived();
                }
            }
        }
    }
}

.simulation-wrapper {
    width: 584px;

    &.water-level-simulation {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 117px;
    }

    &::before {
        display: block;
        width: 584px;
        height: 6px;
        position: relative;
        top: 0px;
        background: url(../../images/c-simulation/bg-simulation-wrapper-before.png) no-repeat top center;
        content: '';
    }

    &::after {
        display: block;
        width: 584px;
        height: 6px;
        position: relative;
        background: url(../../images/c-simulation/bg-simulation-wrapper-after.png) no-repeat top center;
        content: '';
    }

    .simulation {
        background: url(../../images/c-simulation/bg-simulation.png) no-repeat center center;
        width: 564px;
        height: 100px;
        backdrop-filter: blur(20px);
        margin: 0 auto;
        display: flex;
        align-items: center;

        .simulation-header {
            padding: 9px 37px 17px 37px;
            flex-grow: 0;
            flex-shrink: 0;

            .icon {
                width: 39px;
                height: 39px;

                &.icon-water-level-simulation {
                    .bg-icon-water-level-simulation();
                }
            }

            .title {
                font-size: 21px;
                font-family: 'ys';
                color: #fff;
                text-align: center;
            }
        }

        .simulation-body {
            flex-shrink: 1;
            flex-grow: 1;
            padding: 0 50px 0 0;

            .ivu-slider {
                line-height: normal;
                height: 49px;
                margin-top: 24px;
            }

            .ivu-slider-wrap {
                height: 9px;
                // border-radius: 9px;
                border-radius: 5px;

                .ivu-slider-bar {
                    background: #0482ff;
                    box-shadow: 0 1px 2px #ffffff25 inset;
                    height: 9px;
                    // border-radius: 9px;
                    border-radius: 5px;
                }

                .ivu-slider-stop {
                    display: none;
                }

                .ivu-slider-marks {
                    .ivu-slider-marks-item {
                        height: 22px;
                        font-size: 14px;
                        font-family: 'ali-m';
                        color: #fff;
                        margin-top: 15px;
                        width: 60px;
                        text-align: center;
                    }
                }

                .ivu-slider-button-wrap {
                    width: 18px;
                    height: 18px;
                    top: -6px;

                    .ivu-slider-button {
                        width: 18px;
                        height: 18px;
                        border: 0;
                        // box-shadow: 0 2px 5px #00000088;
                        box-shadow: 0 1px 2px #00000088;
                    }
                }
            }
        }
    }


}

.c-button {
    cursor: pointer;
    transition: .3s;

    &.icon-button {
        .icon-fullscreen {
            width: 34px;
            height: 34px;
            position: absolute;
            top: 0;
            right: 0;
            .bg-icon-fullscreen-normal();
        }

        &:active {
            .icon-fullscreen {
                .bg-icon-fullscreen-actived();
            }
        }
    }

    &.c-button-shuttle {
        width: 389px;
        // height: 123px;
        height: 61px;
        background: url(../../images/c-button/btn-shuttle-normal.png) no-repeat center center;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        z-index: 20;
        left: 50%;
        transform: translateX(-50%);
        bottom: 117px;

        .icon {
            width: 33px;
            height: 33px;
            margin-right: 7px;

            &.icon-screen-split {
                .bg-icon-screen-split-normal();
            }
        }

        .text {
            font-size: 40px;
            color: #424242;
            font-family: 'ys';
        }

        &:active {
            background: url(../../images/c-button/btn-shuttle-actived.png) no-repeat center center;

            .icon {
                &.icon-screen-split {
                    .bg-icon-screen-split-actived();
                }
            }

            .text {
                color: #fff;
            }
        }
    }

    &.c-button-return {
        background: url(../../images/c-button/btn-return-normal.png) no-repeat center center;
        position: fixed;
        right: 30px;
        bottom: 60px;
        z-index: 20;
        background-size: contain;
        width: 122px;
        height: 42px;
        display: flex;
        align-items: center;

        &:active {
            background: url(../../images/c-button/btn-return-actived.png) no-repeat center center;
        }

        .text {
            font-family: 'ali-m';
            font-size: 18px;
            color: #fff;
            // margin-left: 105px;
            margin-left: 52px;
        }

        &.compare {
            left: 30px;
            right: auto;
        }

        &.field {
            right: 575px;
        }

        &.design {
            // right: 225px;
            right: 112px;
        }
    }

    &.c-button-tiny {
        width: 122px;
        height: 29px;
        background: url(../../images/c-button/bg-button-tiny-normal.png) no-repeat center center;
        background-size: contain;
        display: flex;
        align-items: center;

        .icon {
            width: 26px;
            height: 26px;
            margin: 0 8px;

            &.icon-fivetwo {
                .bg-icon-fivetwo();
            }
        }

        .text {
            font-size: 18px;
            color: #fff;
            font-family: 'ali-m';
        }

        &:hover {
            background: url(../../images/c-button/bg-button-tiny-actived.png) no-repeat center center;
        }
    }

    /*TODO: c-button-tiny*/
}

.video-player {
    position: relative;

}

.stick-wrapper {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 4px 0;

    .stick-pre {
        width: 28px;
        height: 28px;
        flex-grow: 0;
        flex-shrink: 0;

        .icon {
            width: 28px;
            height: 28px;
            transition: .3s;

            &.icon-bad {
                .bg-icon-alert-normal();

                &:hover {
                    .bg-icon-alert-hover();
                }
            }
        }
    }

    .stick {
        height: 28px;
        flex-grow: 1;
        flex-shrink: 1;
        background: #00000035;
        border-radius: 14px;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        padding: 0 40px 0 7px;

        .bullet {
            width: 10px;
            height: 10px;
            display: block;
            margin-right: 10px;

            &.bullet-green {
                .bg-icon-bullet-green();
            }

            &.bullet-red {
                .bg-icon-bullet-red();
            }
        }

        .stick-header {
            font-size: 18px;
            color: #fff;
            font-family: 'ali-m';
            line-height: 28px;
            flex-grow: 1;
            flex-shrink: 1;
        }

        .stick-body {
            line-height: 28px;
            flex-grow: 0;
            flex-shrink: 0;

            .number {
                font-size: 22px;
                font-family: 'borda-bold';
                color: #fff;
            }

            .unit {
                font-size: 16px;
                color: #fff;
                font-family: 'ali-m';
            }
        }
    }
}

.chart-wrapper {
    position: relative;
    margin-top: 12px;
    height: 145px !important;

    .plate-header {
        border-left: #22a857 4px solid;
        background: #22a85725;
        display: flex;
        align-items: center;

        .title {
            padding-left: 13px;
            font-family: 'ys';
            font-size: 20px;
            color: #fff;
        }
    }

    .slot {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .chart-text-lt {
        color: #fff;
        font-family: 'ali-m';
        font-size: 14px;
        position: absolute;
        top: -10px;
        left: 0;
    }

    &.pie-halo {
        background: url(../../images/c-echarts/bg-chart-pie.png) no-repeat center center;
        background-size: contain;
    }

    &.overall.chart-liquid {

        .slot {
            display: flex;
            flex-flow: column;
            justify-content: center;

            .title {
                font-family: 'borda-bold';
                font-size: 36px;
                color: #fff;
                letter-spacing: 1px;
                text-shadow: 0px 1px 2px #52A827;
                text-align: center;
                line-height: 36px;

                small {
                    font-family: 'ali-m';
                    font-size: 18px;
                    line-height: 18px;
                    color: #fff;
                    text-shadow: 0px 1px 2px #52A827;
                }
            }

            .subtitle {
                text-align: center;
                font-size: 20px;
                font-family: 'ys';
                color: #fff;
                text-shadow: 0px 1px 1px #22A857;
            }
        }
    }

    &.ecology.chart-liquid {
        .slot {
            display: flex;
            flex-flow: column;
            justify-content: center;

            .title {
                font-family: 'borda-bold';
                font-size: 50px;
                color: #fff;
                letter-spacing: 2px;
                text-shadow: 0px 2px 4px #52A827;
                text-align: center;
                line-height: 36px;

                small {
                    font-family: 'ali-m';
                    font-size: 28px;
                    line-height: 28px;
                    color: #fff;
                    text-shadow: 0px 2px 4px #52A827;
                }
            }

            .subtitle {
                text-align: center;
                font-size: 22px;
                font-family: 'ys';
                color: #fff;
                text-shadow: 0px 2px 2px #22A857;
            }
        }
    }

    &.chart-halo-pie {
        .pie-halo {
            background: url(../../images/c-echarts/bg-chart-pie.png) no-repeat center center;
            background-size: contain;
        }
    }

    &.chart-gauge {
        width: 114px;
        height: 114px;

        .slot {
            width: 114px;
            display: flex;
            flex-flow: column;
            justify-content: center;
            text-align: center;

            .title {
                font-size: 36px;
                font-family: 'borda';
                line-height: 36px;
                color: #fff;

                small {
                    font-size: 18px;
                    font-family: 'ali-m';
                    color: #fff;
                }
            }

            .subtitle {
                font-size: 20px;
                font-family: 'ys';
                line-height: 20px;
                color: #fff;
                position: relative;
                top: -5px;
            }

        }
    }
}

.carousel-wrapper {
    position: relative;

    .ivu-carousel {
        width: 424px;
        margin: 16px auto;

        .ivu-carousel-dots {
            text-align: right;

            &.ivu-carousel-dots-inside {
                bottom: 5px;
                right: 40px;
            }

            li {
                .radius {
                    width: 8px;
                    height: 8px;
                    border-radius: 8px;
                    border: 1px #fff solid;
                    background: #fff;
                }

                &.ivu-carousel-active {
                    button.radius {
                        width: 8px;
                        height: 8px;
                        background: #1FBF8A;
                    }
                }
            }


        }


    }

    .title {
        position: absolute;
        padding-left: 40px;
        height: 22px;
        bottom: 21px;
        left: 0;
        right: 0;
        font-size: 14px;
        color: #fff;
        line-height: 22px;
        background: -webkit-linear-gradient(top, #16161600, #161616ff);
    }
}

.ivu-modal-mask {
    background: rgba(255, 255, 255, 0.5);
    z-index: 30;
}

.ivu-modal-wrap {
    .ivu-modal {
        top: 50%;
        transform: translateY(-50%);

        .ivu-modal-content {
            box-shadow: none;
            border-radius: 0;
            background: none;
        }

        .ivu-modal-close {
            width: 36px;
            height: 36px;
            border-radius: 36px;
            background: #00000055;
            border: 1px #fff solid;
            text-align: center;
            top: 16px;
            right: 16px;

            .ivu-icon {
                color: #fff;
                font-size: 36px;
                line-height: 36px;
                top: 0;
                left: 0;
            }
        }
    }
}

.grid {
    display: flex;
    flex-flow: row nowrap;
    overflow-x: auto;
    overflow-y: hidden;

    .grid-item {
        position: relative;

        .title {
            position: absolute;
            padding-left: 40px;
            height: 22px;
            bottom: 0px;
            left: 0;
            right: 0;
            font-size: 14px;
            color: #fff;
            line-height: 22px;
            background: -webkit-linear-gradient(top, #16161600, #161616ff);
        }
    }

    &::-webkit-scrollbar {
        margin-right: 3px;
        height: 3px;
    }

    &::-webkit-scrollbar-track {
        // height: 3px;
        height: 2px;
        background: #00000046;
    }

    &::-webkit-scrollbar-thumb {
        height: 2px;
        background: #FFFFFFDD;
        border-radius: 2px;
    }
}

.broadcaster {
    position: fixed;
    z-index: 20;
    width: 312px;
    height: 316px;

    .box-header {
        .icon {
            width: 24px;
            height: 24px;

            &.icon-broadcaster {
                .bg-icon-broadcaster-header();
            }
        }

        .box-extra {
            min-width: auto;
            padding-right: 16px;
            width: 32px;
            height: 16px;
            margin: 3px auto;

            .icon {}

            .icon-arrow-down {
                .bg-icon-arrow-down();
            }

            .icon-arrow-up {
                .bg-icon-arrow-up();
            }
        }
    }

    .box-body {

        padding-left: 20px;
        padding-right: 15px;

        .ivu-tabs {
            .ivu-tabs-bar {
                .ivu-tabs-nav-container {
                    height: 28px;
                }
            }
        }

        .ivu-tabs-nav {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            width: 100%;

            .ivu-tabs-tab {
                flex-grow: 1;
                flex-shrink: 1;
                background: rgba(0, 0, 0, 0.4);
                color: #fff;
                height: 28px;
                line-height: 28px;
                font-size: 18px;
                font-family: 'ali-m';
                text-align: center;
                border-radius: 6px 6px 0 0;
                padding: 0px;
                border: none;

                &.ivu-tabs-tab-active {
                    background: #fff;
                    color: #424242;
                }
            }
        }

        .audio-player-wrapper {
            display: flex;
            flex-flow: row wrap;
            align-items: flex-start;

            .audio-item-left {
                background: rgba(0, 0, 0, 0.24);
                margin-right: 3px;
                width: 116px;
                height: 157px;
                flex-grow: 0;
                flex-shrink: 0;
                padding: 0 8px;
            }

            .audio-item-right {
                background: rgba(0, 0, 0, 0.24);
                width: 158px;
                height: 157px;
                flex-grow: 0;
                flex-shrink: 0;
                padding: 0 8px;
            }

            .audio-header {
                border-bottom: 1px rgba(255, 255, 255, 0.6) solid;

                .title {
                    font-family: 'ali-m';
                    font-size: 14px;
                    color: #fff;
                    // padding: 11px 0 16px 0;
                    padding: 5px 0 8px 0;
                    display: block;

                    .audio-header-toggle {
                        display: flex;
                        flex-flow: row nowrap;
                        align-items: center;

                        .ivu-checkbox {
                            display: none;
                        }

                        .icon {
                            width: 20px;
                            height: 20px;
                            margin-right: 7px;
                            .bg-icon-play-repeat-normal();
                        }

                        .text {
                            font-size: 12px;
                            font-family: 'ali-m';
                            color: #fff;
                        }

                        &.ivu-checkbox-wrapper-checked {
                            .icon {
                                .bg-icon-play-repeat-actived();
                            }
                        }
                    }
                }
            }

            .audio-slot {
                position: relative;
            }

            .audio-body {
                .audio-switch-wrapper {
                    width: 100%;
                    display: flex;
                    padding: 8px 0;
                    align-items: center;

                    .text {
                        font-size: 12px;
                        color: #fff;
                        font-family: 'ali-m';
                        margin-right: 6px;
                    }

                    .ivu-switch {
                        width: 43px;
                        height: 17px;

                        &:after {
                            width: 15px;
                            height: 15px;
                            top: 0px;
                            left: 1px;
                        }

                        &.ivu-switch-checked {
                            background: #0080FF;
                            box-shadow: 0 1px 2px #76d6ff inset;

                            &:after {
                                left: 27px;
                            }
                        }
                    }
                }

                .audio-list {
                    .audio-checkbox-list {
                        max-height: 82px;
                        overflow: auto;

                        &::-webkit-scrollbar {
                            margin-right: 3px;
                            width: 6px;
                        }

                        &::-webkit-scrollbar-track {
                            width: 4px;
                            background: #00000046;
                            border-radius: 4px;
                        }

                        &::-webkit-scrollbar-thumb {
                            width: 6px;
                            background: #FFFFFFDD;
                            // border-radius: 7px;
                            border-radius: 4px;
                        }

                        .ivu-checkbox-wrapper {
                            display: block;
                            // height:53px;
                            height: 26px;
                            font-family: 'ali-m';
                            color: #fff;
                            font-size: 12px;
                            padding: 5px 0;

                            .ivu-checkbox-inner {
                                background: rgba(0, 0, 0, 0.4);
                                border: 1px #A9A9A9 solid;
                                width: 14px;
                                height: 14px;
                                margin-right: 9px;
                            }
                        }

                        .ivu-checkbox-wrapper-checked {
                            .ivu-checkbox-inner {
                                background: url(../../images/c-broadcaster/bg-checkbox-checked.png) no-repeat center center;
                                border: 1px transparent solid;

                                &:after {
                                    width: 0;
                                    height: 0;
                                    display: none;
                                }
                            }
                        }
                    }

                    .audio-single-list {
                        margin-top: 5px;
                        max-height: 110px;
                        overflow: auto;

                        &::-webkit-scrollbar {
                            margin-right: 3px;
                            width: 6px;
                        }

                        &::-webkit-scrollbar-track {
                            width: 4px;
                            background: #00000046;
                            border-radius: 4px;
                        }

                        &::-webkit-scrollbar-thumb {
                            width: 6px;
                            background: #FFFFFFDD;
                            // border-radius: 7px;
                            border-radius: 4px;
                        }

                        .ivu-checkbox-wrapper {
                            display: block;
                            // height:43px;
                            height: 21px;
                            font-family: 'ali-m';
                            color: #fff;
                            font-size: 12px;
                            display: flex;
                            align-items: center;
                            padding: 0 3px;

                            .ivu-checkbox-inner {
                                display: none;
                            }
                        }

                        .ivu-checkbox-wrapper-checked {
                            background: rgba(255, 255, 255, 0.2);
                        }
                    }
                }

                .icon-wave {
                    background: url(../../images/c-broadcaster/bg-wave.png) no-repeat center center;
                    background-size: contain;
                    width: 98px;
                    height: 42px;
                    margin: 24px auto 18px auto;
                }

                .icon-speak {
                    background: url(../../images/c-broadcaster/icon-speak.png) no-repeat center center;
                    background-size: contain;
                    width: 63px;
                    height: 63px;
                    margin: 47px auto;
                }

                .audio-text-countup {
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: center;
                    align-items: center;

                    .bullet-red {
                        width: 6px;
                        height: 6px;
                        border-radius: 6px;
                        background: #D81E00;
                        margin-right: 12px;
                    }

                    .text {
                        font-family: 'ali-m';
                        color: #fff;
                        font-size: 15px;
                    }
                }
            }

            .audio-item-footer {
                width: 100%;
                flex-shrink: 0;
                flex-grow: 0;
                padding: 24px 19px;

                .btn {
                    background: url(../../images/c-broadcaster/bg-btn-normal.png) no-repeat center center;
                    width: 235px;
                    height: 28px;
                    text-align: center;
                    font-size: 18px;
                    color: #fff;
                    font-family: 'ali-m';
                    transition: .3s;
                    cursor: pointer;

                    &:active {
                        background: url(../../images/c-broadcaster/bg-btn-actived.png) center center no-repeat;
                    }
                }

            }
        }
    }

    &.landscape {
        top: 57px;
        right: 550px;
    }
}